<template>
  <!-- 科研人才足迹圈 -->
  <div>
    <div id="chartThree"></div>
  </div>
</template>

<script>
import chinaJson from "echarts/map/json/china.json"
import worldJson from "echarts/map/json/world.json"
import { world } from "@/utils/mock/world"
import { transCNCountry, resize } from "@/utils/utils"
import { geoCoord } from '@/utils/mock/geoCoordMap'
export default {
  mixins: [resize],
  data() {
    return {
      chartThree: null,
      mapData: [
        {
          name: "China",
          cnName: "中国",
          value: 333,
        },
        {
          name: "Afghanistan",
          cnName: "阿富汗",
          value: 111,
        },
      ],
      data: []
    };
  },
  methods: {
    getSeriesData() {
      this.$echarts.registerMap("world", worldJson);
      let newData = world;
      newData.forEach((v) => {
        this.mapData.forEach((b) => {
          if (v.name === b.name) {
            v.value = b.value;
          }
        });
      });
      let seriesData = [
        {
          type: "map",
          map: "world",
          roam: false,
          // zoom: 1.1,
          itemStyle: {
            areaColor: "#edf0f4",
            borderColor: "#fff",
          },
          emphasis: {
            label: {
              show: true,
              formatter: (params) => {
                if (params.data) {
                  return params.data.cnName;
                }
                return params.data;
              },
            },
            itemStyle: {
              areaColor: "#ffb478",
              color: "#fff",
              borderColor: "#fff",
            },
          },
          data: newData,
        },
      ];
      return seriesData;
    },
    init() {
      let seriesData = this.getSeriesData();
      // let allvalue = []
      // this.mapData.forEach(v => {
      //   allvalue.push(v.value)
      // })

      let option = {
        tooltip: {
          confine: true,
          show: true,
          trigger: "item",
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000",
          },
          formatter: (params) => {
            let marker = params.marker;
            let data = params.data;
            let str = "";
            if (data) {
              str = `${marker}${data.name}:${data.value}`;
            }
            return str;
          },
        },
        backgroundColor: "#fff",
        // visualMap: {
        //   show: false,
        //   type: 'piecewise',
        //   left: '5%',
        //   bottom: '40px',
        //   min: 0,
        //   max: Math.max(...allvalue),
        //   text: ['高', '低'],
        //   showLabel: false,
        //   itemGap: 0,
        //   textGap: 50,
        //   inRange: {
        //     color: ["#edf0f4", "#ffb478"]
        //   }
        // },
        series: seriesData,
      };

      this.chartThree.setOption(option, true);
    },
    init2() {
      this.$echarts.registerMap("world", worldJson)
      let newData = world
      newData.forEach((v) => {
        this.mapData.forEach((b) => {
          if (v.name === b.name) {
            v.value = b.value
          }
        })
      })
      var geoCoordMap = geoCoord
      this.data = [
        [{ name: "墨西哥", value: 1 }, { name: "加拿大", value: 2 }],
        [{ name: "加拿大", value: 2}, { name: "澳大利亚", value: 3 }],
        [{ name: "澳大利亚", value: 3 }, { name: "阿联酋", value: 4 }],
      ];
      var data_ = [
        [{ name: "尼日利亚" }, { name: "墨西哥", value: 1 }],
        [{ name: "" }, { name: "尼日利亚", value: 0 }],
      ];
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = geoCoordMap[dataItem[0].name] || []
          var toCoord = geoCoordMap[dataItem[1].name] || []
          if (fromCoord.length > 0 && toCoord.length > 0) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord],
              value: dataItem[1].value,
              visualMap: false,
            });
          }
        }
        return res;
      };

      var series = []
      let that = this
      let n = 0
      fn(data_)
      timer()
      function timer() {
        that.inter = setInterval(function () {
          n++;
          if (n > that.data.length) {
            clearInterval(that.inter);
            // setTimeout(function () {
            //   that.chartThree.clear();
            //   n = 0;
            //   series = [];
            //   fn(data_);
            //   timer();
            // }, 5000);
          } else {
            let arr = []
            arr.push(that.data[n - 1])
            fn(arr)
          }
        }, 4000);
      }

      function fn(arr) {
        [["", arr]].forEach(function (item, i) {
          series.push(
            {
              type: "lines",
              zlevel: 2,
              animation: false,
              tooltip: {
                show: false
              },
              effect: {
                show: true,
                period: 3, //箭头指向速度，值越小速度越快
                trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "arrow", //箭头图标
                symbolSize: 8, //图标大小
                color: "241c75",
                loop: false,
              },
              lineStyle: {
                // color: "white",
                normal: {
                  color: "#241c75",
                  width: 1,
                  opacity: 0.2,
                  curveness: 0.1, // 边的弧度
                },
              },
              data: convertData(item[1]),
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              animation: false,
              tooltip: {
                show: false
              },
              rippleEffect: {
                //涟漪特效
                color: '#cecfe4',
                period: 4, //动画时间，值越小速度越快
                brushType: "fill", //波纹绘制方式 stroke, fill
                scale: 2, //波纹圆环最大限制，值越大波纹越大
              },
              symbol: "circle",
              symbolSize: function (val) {
                return 13; //圆环大小
              },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  backgroundColor: 'rgba(255, 255, 255, 0.6)',
                  borderRadius: 2,
                  formatter: (params) => {
                    let str = ''
                    str += '{h4|2014-2018}\n' +
                      '{hr|}\n' +
                      '{hr15|}\n' +
                      `{a|任职地点：}{b|${params.name}}\n` +
                      '{hr5|}\n' + 
                      `{a|任职机构：}{b|CEO}\n` +
                      '{hr15|}'
                    return str
                  },
                  rich: {
                    h4: {
                      lineHeight: 30,
                      padding: 16,
                      borderBottom: '1px solid #000',
                      color: '#595959'
                    },
                    hr: {
                      width: '100%',
                      height: 0,
                      borderColor: '#f5f5fe',
                      borderWidth: 1
                    },
                    hr5: {
                      width: '100%',
                      height: 5
                    },
                    hr15: {
                      width: '100%',
                      height: 15
                    },
                    a: {
                      lineHeight: 18,
                      padding: [0, 0, 0, 16],
                      fontSize: 14,
                      color: '#241c75'
                    },
                    b: {
                      lineHeight: 18,
                      padding: [0, 16, 0, 0],
                      fontWeight: 'bold',
                      fontSize: 14,
                      color: '#241c75'
                    },
                  }
                  // position: "right", //显示位置
                  // offset: [5, 0], //偏移设置
                  // formatter: "{b}", //圆环显示文字
                },
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                normal: {
                  color: "#504da5", //标志颜色
                  borderColor: "#fff",
                },
                emphasis: {
                  areaColor: "orange",
                },
              },
              data: item[1].map(function (dataItem) {
                return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([
                    dataItem[1].value,
                  ]),
                  visualMap: false,
                };
              }),
            }
          );
        });
        var pro = {
          backgroundColor: "#fff",
          title: {
            text: "",
            left: "center",
            textStyle: {
              color: "#fff",
            },
          },
          tooltip: {
            trigger: "item",
            backgroundColor: "#1540a1",
            borderColor: "#FFFFCC",
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: "z-index:100",
            formatter: function (params, ticket, callback) {
              //根据业务自己拓展要显示的内容
              var res = "";
              var name = params.name;
              var value = params.value[params.seriesIndex + 1];
              res =
                "<span style='color:#fff;'>" +
                name +
                "</span><br/>数据：" +
                value;
              return res;
            },
          },
          visualMap: {
            //图例值控制
            min: 0,
            max: 10000,
            show: false,
            calculable: true,
          },
          geo: {
            map: "world",
            label: {
              emphasis: {
                show: false,
              },
            },
            roam: true, //是否允许缩放
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "180%",
            itemStyle: {
              normal: {
                areaColor: "#edf0f4",
                borderColor: "#fff",
              },
              // emphasis: {
              //     areaColor: '#edf0f4'
              // }
            },
          },
          series: series,
        };
        that.chartThree.setOption(pro)
      }
    },
  },
  mounted() {
    this.chartThree = this.$echarts.init(document.getElementById("chartThree"));
    // this.init()
    this.init2()
  },
};
</script>

<style lang="scss" scoped>
#chartThree {
  width: 100%;
  height: 360px;
}
</style>